<template>
  <div class="info">
    <div class="title">
      <div class="left">
        <h2>{{ username }}&nbsp;,&emsp;{{ Time() }}</h2>
        <p>今天为您推荐4款精品哦~</p>
      </div>
      <div class="right">
        <RouterLink to="/search" class="search">
          <van-icon name="search" size="30" class="search" color="black" />
        </RouterLink>
      </div>
    </div>
    <div class="JingXuan">
      <swiper
        ref="mySwiper"
        :grabCursor="true"
        :modules="modules"
        :effect="'cards'"
        :loop="true"
        :autoplay="autoplay"
        @slideChangeTransitionStart="changeGoodsInfo1"
        @touchMove="changeGoodsInfo1"
      >
        <swiper-slide v-for="item in imagesLoop" :key="item.id">
          <RouterLink to="/detailPage"
            ><img v-lazy="getImageUrl(item.imgUrl, 'png')" alt="" />
          </RouterLink>
        </swiper-slide>
      </swiper>

      <div class="fixedInfo">
        <div class="d1">
          <span class="s1">{{ imagesLoop[index].title }}</span>
          <p>
            <span class="star"
              ><van-icon name="star-o" size="16" color="orange"
            /></span>
            <span>{{ imagesLoop[index].starCount }}</span>
          </p>
        </div>
        <p class="p2">{{ imagesLoop[index].dsc }}</p>
        <p class="p3">
          <span class="ss1">已售{{ imagesLoop[index].sellCount }}件</span>
          <span class="ss2">￥{{ imagesLoop[index].price }}</span>
        </p>
      </div>
    </div>
    <div class="top10">
      <div class="title1">
        <p class="new">新品top.10</p>
        <RouterLink to="/choiceness">
          <p class="more">
            <span>查看更多</span>
            <van-icon name="arrow" />
          </p>
        </RouterLink>
      </div>
      <div class="goodsImages">
        <div class="goodsImage">
          <div v-for="item in newGoods2" :key="item.id">
            <RouterLink to="/choiceness">
              <img v-lazy="item.productimg" alt="" />
            </RouterLink>
            <p class="grayT"></p>
            <p class="goodsName2">{{ item.productname }}</p>
            <p class="goodsPrice2">￥{{ item.price }}</p>
          </div>
        </div>
      </div>
    </div>
    <div class="hot">
      <p>热销</p>
      <div class="goods">
        <div v-for="item in hotGoods" :key="item.id">
          <RouterLink to="/detailPage">
            <img v-lazy="item.productimg" alt="" />
          </RouterLink>
          <p class="goodsName">{{ item.productname }}</p>
          <p class="goodsPrice">￥{{ item.price }}</p>
        </div>
      </div>
    </div>
    <p class="bottomTip">
      <van-icon name="gem-o" size="18" />&nbsp;已经到最底下了~
    </p>
    <ZhiDing></ZhiDing>
  </div>
</template>

<script setup>
import ZhiDing from "@/components/ZhiDing.vue";
import { EffectCards, Autoplay } from "swiper";
import { Swiper, SwiperSlide } from "swiper/vue";
import "swiper/less";
import "swiper/css/effect-cards";
import { reactive, ref } from "vue";
import { getGoodsList } from "@/api/getGoodsList.js";
import { getImageUrl } from "@/uilts/index.js";

const modules = [EffectCards, Autoplay];
const autoplay = {
  delay: 3000,
};
// 获取当前时间并判断是上午、中午、下午、晚上
const Time = () => {
  const nowTime = new Date();
  const hour = nowTime.getHours();
  if (1 <= hour && hour <= 11) {
    return "早上好！";
  } else if (hour === 12) {
    return "中午好！";
  } else if (12 < hour && hour < 18) {
    return "下午好！";
  } else if (hour >= 19) {
    return "晚上好！";
  }
  console.log(nowTime);
  console.log(hour);
};
// 随着轮播图的切换改变商品信息，让图片与信息能够对应上
function changeGoodsInfo1(event) {
  if (event.activeIndex === 6) {
    index.value = 0;
  } else if (event.activeIndex === 0) {
    index.value = 4;
  } else {
    index.value = event.activeIndex - 1;
  }
}
//获取商品信息列表
const newGoods2 = ref([]);
const hotGoods = ref([]);

const getList = async () => {
  const { data } = await getGoodsList();
  newGoods2.value = data.applist2;
  hotGoods.value = data.applist3;
};
getList();
const index = ref(0);
// 模拟精选商品的数据
const imagesLoop = reactive([
  {
    id: 2001,
    imgUrl: "u1",
    title: "新款帆布鞋",
    starCount: 4.8,
    dsc: "穿出来的品质，个性鞋",
    sellCount: 2851,
    price: 28.58,
  },
  {
    id: 2003,
    imgUrl: "u2",
    title: "韩版人字拖",
    starCount: 4.5,
    dsc: "男生必备装逼拖鞋",
    sellCount: 1851,
    price: 38.12,
  },
  {
    id: 2004,
    imgUrl: "u3",
    title: "灰白帆布鞋",
    starCount: 4.7,
    dsc: "穿出来的品质，时尚个性鞋",
    sellCount: 2500,
    price: 46.85,
  },
  {
    id: 2005,
    imgUrl: "u4",
    title: "潮流运动鞋",
    starCount: 4.6,
    dsc: "舒适运动鞋，走在潮流前沿的鞋",
    sellCount: 3000,
    price: 89.99,
  },
  {
    id: 2001,
    imgUrl: "u1",
    title: "新款帆布鞋",
    starCount: 4.8,
    dsc: "穿出来的品质，个性鞋",
    sellCount: 2851,
    price: 28.58,
  },
]);
//用户名称的获取
const getUserName = localStorage.getItem("username");
const username = ref("TC_ZY");
if (getUserName) {
  username.value = getUserName;
}
</script>

<style lang="less" scoped>
a {
  color: black;
}
.swiper,
img {
  width: 80vw;
  height: 54vw;
}
.swiper-slide {
  display: flex;
  align-items: center;
  justify-content: center;
}

::-webkit-scrollbar {
  display: none;
}
.info {
  overflow: auto;
}
.title {
  display: flex;
  justify-content: space-between;
  padding: 0vw 5.5vw;
  align-items: center;
  margin-bottom: 5.333vw;
  h2 {
    margin-top: 5.333vw;
    margin-bottom: 2.667vw;
    font-weight: bold;
  }
  p {
    font-size: 4vw;
    color: gray;
  }
  .search {
    font-weight: bold;
    margin-top: 11.333vw;
  }
}
.JingXuan {
  height: 62.667vw;
  padding: 0vw 5.5vw;
  text-align: center;
  border-top: 1px solid transparent;
  position: relative;
  .fixedInfo {
    z-index: 10;
    height: 24.333vw;
    width: 60vw;
    position: absolute;
    bottom: 0.333vw;
    left: 50%;
    transform: translateX(-50%);
    background: white;
    padding: 0vw 3vw;
    box-shadow: -1px 1px 10px gray;
    .d1 {
      display: flex;
      justify-content: space-between;
      font-size: 3.7vw;
      font-weight: bold;
      margin-top: 3.5vw;
      .star {
        margin-right: 2.8vw;
      }
    }
    .p2 {
      width: 40.333vw;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      font-size: 3.5vw;
      color: gray;
      text-align: left;
      margin-top: 1.333vw;
    }
    .p3 {
      font-size: 3.5vw;
      color: gray;
      text-align: left;
      margin-top: 1.333vw;
      display: flex;
      justify-content: space-between;
      .ss2 {
        color: orangered;
        font-weight: bold;
      }
    }
  }
  img {
    width: 100%;
    height: 53.333vw;
  }
}
.top10 {
  margin-top: 8vw;
  height: 64.667vw;
  padding: 0vw 5.5vw;
  .title1 {
    display: flex;
    justify-content: space-between;
    .new {
      font-size: 5.333vw;
      font-weight: bold;
    }
    .more {
      font-size: 3.733vw;
      color: gray;
      span {
        margin-right: 1.333vw;
      }
    }
  }
  .goodsImages {
    height: 30.333vw;
    background: white;
    margin-top: 25.333vw;
    box-shadow: -1px 1px 8px gray;
    position: relative;
    .goodsImage {
      width: 100%;
      margin-left: -0.333vw;
      background: white;
      position: absolute;
      top: -19.667vw;
      display: flex;
      justify-content: space-between;
      overflow: hidden;
      padding-left: 3.333vw;
      div {
        text-align: center;
        margin-right: 19.733vw;
        img {
          width: 35.667vw;
          height: 30.667vw;
        }
        .grayT {
          width: 24.333vw;
          height: 1.333vw;
          border-radius: 4vw;
          box-shadow: 5px -3px 5px gray;
          background: gray;
          margin: 3vw auto;
          margin-bottom: 2vw;
        }
        .goodsName2 {
          width: 35.667vw;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
          margin-top: 1.333vw;
          font-size: 3.733vw;
          font-weight: bold;
        }
        .goodsPrice2 {
          color: orangered;
          margin-bottom: 1.8vw;
        }
      }
    }
  }
}
.hot {
  margin-top: 7.333vw;
  padding: 0vw 5.5vw;
  p {
    font-size: 5vw;
    font-weight: bold;
  }
  .goods {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    div {
      width: 42vw;
      margin-top: 2.667vw;
      text-align: center;
      margin-top: 5.333vw;
      img {
        width: 42vw;
        height: 42vw;
        border-radius: 2.667vw;
      }
      p {
        font-size: 3.733vw;
        font-weight: bold;
      }
      .goodsName {
        margin-top: 4.667vw;
        width: 42vw;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }
      .goodsPrice {
        color: orangered;
      }
    }
  }
}
.bottomTip {
  height: 26.333vw;
  text-align: center;
  margin-top: 6.667vw;
}
</style>
